// Name:            Topbar
//
// Description:     Define style for topbar
//
// Component:       `.am-topbar`
//
// Sub-objects:     `.am-topbar-nav`
//                  `.am-topbar-nav-subtitle`
//                  `.am-topbar-collapse
//                  `.am-topbar-brand`
//                  `.am-topbar-toggle`
//                  `.am-topbar-left`
//                  `.am-topbar-right`
//                  `.am-topbar-form`
//                  `.am-topbar-btn`
//
// Modifiers:       `.am-topbar-inverse`
//
// States:          `.am-active`
//                  `.am-disabled`
//
// Uses:              Dropdown
//                   Collapse
//
// =============================================================================

/* ==========================================================================
   Component: Topbar
 ============================================================================ */

.@{ns}topbar {
    position: relative;
    //padding: 0 10px;
    min-height: @topbar-height;
    margin-bottom: @topbar-margin-bottom;
    background: @topbar-bg;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: @topbar-border;
    color: @topbar-color;
    .clearfix();
    a {
        color: @topbar-link-color;
    }
    .hook-topbar;
}

// brand
.@{ns}topbar-brand {
    margin: 0;
    @media @medium-up {
        float: left;
    }
    a {
        &:hover {
            color: @topbar-brand-hover-color;
        }
    }
    .hook-topbar-brand;
}

.@{ns}topbar-collapse {
    width: 100%;
    overflow-x: visible;
    padding: @topbar-padding-horizontal;
    .clearfix();
    clear: both;
    -webkit-overflow-scrolling: touch;
    // max-height: @topbar-collapse-max-height;
    &.@{ns}in {
        overflow-y: auto;
    }
    @media @medium-up {
        margin-top: 0;
        padding: 0;
        width: auto;
        clear: none;
        &.@{ns}collapse {
            display: block !important;
            height: auto !important;
            padding: 0;
            overflow: visible !important;
        }
        &.@{ns}in {
            overflow-y: visible;
        }
    }
}

.@{ns}collapse {
    display: none;

    &.@{ns}in {
        display: block;
    }
}

.@{ns}collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

// Brand in topbar
.@{ns}topbar-brand {
    padding: 0 @topbar-padding-horizontal;
    float: left;
    font-size: @font-size-lg;
    height: @topbar-height;
    line-height: @topbar-height;
}

// Topbar toggle in samll device
.@{ns}topbar-toggle {
    position: relative;
    float: right;
    margin-right: @topbar-padding-horizontal;
    @media @medium-up {
        display: none;
    }
}

// .@{ns}nav within topbar
.@{ns}topbar-nav {
    @media @small-only {
        margin-bottom: @topbar-spacing-vertical;
        >li {
            float: none;
        }
    }
    >li {
        &+li {
            @media @small-only {
                margin-left: 0;
                margin-top: 5px;
            }
        }
    }
    @media @medium-up {
        float: left;
        >li {
            >a {
                position: relative;
                line-height: 50px;
                height: 50px;
                padding: 0 @topbar-padding-horizontal;
                &:after {
                    position: absolute;
                    left: 50%;
                    margin-left: -7px;
                    bottom: -1px;
                    content: "";
                    .caret-up(7px, @topbar-bg);
                    opacity: 0;
                    transition: opacity .1s;
                }
                &:hover:after {
                    opacity: 1;
                    border-bottom-color: @topbar-color;
                }
            }
            // hide dropdown caret
            &.@{ns}dropdown {
                >a:after {
                    display: none;
                }
            }
            // nav active status
            &.@{ns}active {
                >a {
                    &, &:hover, &:focus {
                        border-radius: 0;
                        color: @topbar-link-active-color;
                        background: none;
                    }
                    &:after {
                        opacity: 1;
                        border-bottom-color: @topbar-link-active-color;
                    }
                }
            }
        }
    }
}

// dropdown in topbar
.@{ns}topbar-collapse {
    .@{ns}dropdown.@{ns}active {
        @media @small-only {
            .@{ns}dropdown-content {
                float: none;
                position: relative;
                width: 100%;
            }
            .@{ns}icon-caret-down {}
        }
    }
}

// Component alignment
@media @medium-up {
    .@{ns}topbar-left {
        float: left;
    }
    .@{ns}topbar-right {
        float: right;
        margin-right: @topbar-padding-horizontal;
    }
}

// form in topbar
.@{ns}topbar-form {
    .@{ns}form-group {
        @media @small-only {
            margin-bottom: 5px;
        }
    }
    @media @medium-up {
        padding: 0 @topbar-padding-horizontal;
        margin-top: @topbar-spacing-vertical;
        .@{ns}form-group+.@{ns}btn {
            margin-left: 5px;
        }
    }
}

// Btn in topbar
.@{ns}topbar-btn {
    margin-top: @topbar-spacing-vertical;
}

.@{ns}topbar-collapse {
    .@{ns}topbar-btn, .@{ns}btn {
        @media @small-only {
            display: block;
            width: 100%;
        }
    }
}

// Inverse topbar
// =============================================================================
.@{ns}topbar-inverse {
    background-color: @topbar-inverse-bg;
    border-color: @topbar-inverse-border;
    color: @topbar-inverse-color;
    a {
        color: @topbar-inverse-link-color;
    }
    .@{ns}topbar-brand {
        a {
            color: @topbar-inverse-brand-color;
            &:hover, &:focus {
                color: @topbar-inverse-brand-hover-color;
                background-color: @topbar-inverse-brand-hover-bg;
            }
        }
    }
    .@{ns}topbar-nav {
        >li {
            >a {
                color: @topbar-inverse-link-color;
                // THE RIGHT ORDOR :hover:after
                &:hover, &:focus {
                    color: @topbar-inverse-link-hover-color;
                    background-color: @topbar-inverse-link-hover-bg;
                    &:after {
                        border-bottom-color: darken(@topbar-inverse-bg, 10%);
                    }
                }
                &:after {
                    border-bottom-color: @topbar-inverse-bg;
                }
            }
            &.@{ns}active>a {
                &, &:hover, &:focus {
                    color: @topbar-inverse-link-active-color;
                    background-color: @topbar-inverse-link-active-bg;
                    &:after {
                        border-bottom-color: @topbar-inverse-link-active-color;
                    }
                }
            }
            .disabled>a {
                &, &:hover, &:focus {
                    color: @topbar-inverse-link-disabled-color;
                    background-color: @topbar-inverse-link-disabled-bg;
                }
            }
        }
    }
    .hook-topbar-inverse;
}

// Fixed modifier
// =============================================================================
.@{ns}topbar-fixed-top, .@{ns}topbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: @z-index-topbar-fixed;
    transform: translate3d(0, 0, 0);
}

.@{ns}topbar-fixed-top {
    top: 0;
}

.@{ns}topbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;
}

.@{ns}with-topbar-fixed-top {
    padding-top: @topbar-height + 1;
}

.@{ns}with-topbar-fixed-bottom {
    padding-bottom: @topbar-height + 1;
}

@media @small-only {
    .@{ns}topbar-fixed-bottom {
        .@{ns}topbar-collapse {
            position: absolute;
            bottom: 100%;
            margin-bottom: 1px;
            background-color: @topbar-bg;
            .@{ns}dropdown-content {
                &:before, &:after {
                    display: none;
                }
            }
        }
        &.@{ns}topbar-inverse {
            .@{ns}topbar-collapse {
                background-color: @topbar-inverse-bg;
            }
        }
    }
}

// Hooks
// =============================================================================
.hook-topbar() {}

.hook-topbar-brand() {}

.hook-topbar-inverse() {}
